<template>
    <div class="glassWareHousing">
        <div class="container">
            <el-row>
                <el-col :span="12">
                    Rfid读卡设备: 
                    <el-select
                        v-model="cardValue"
                        placeholder="请选择Rfid读卡设备"
                        size="large"
                        style="width: 240px"
                        >
                        <el-option
                            v-for="item in cardValueoptions"
                            :key="item.rf_code"
                            :label="item.rf_name"
                            :value="item.rf_code"
                        />
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" :disabled="btnStatus == 1" @click="startReadCard" :icon="btnStatus == 0 ? '' : Loading">{{btnStatus == 0 ? '启动读卡' : '读卡中'}}</el-button>
                    <el-button type="danger" @click="stopReadCard">停止读卡</el-button>
                    <el-button type="warning" @click="clearTags">清空标签</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top: 50px;">
                <el-col :span="24">
                    标签数据 <el-tag type="danger">已采集标签{{tagList.length}}个</el-tag>
                </el-col>
                <el-col :span="24">
                    <div class="tagContainer">
                        <el-tag type="success" style="margin: 10px" v-for="item in tagList" :key="item">{{ item }}</el-tag>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-top: 50px;">
                <el-col :span="24">
                    眼镜分类 
                    <el-select
                        v-model="glassType"
                        placeholder="请选择眼镜分类"
                        size="large"
                        style="width: 240px"
                        >
                        <el-option
                            v-for="item in glassTypeoptions"
                            :key="item.t_code"
                            :label="item.t_type_name"
                            :value="item.t_code"
                        />
                    </el-select>
                </el-col>
            </el-row>
            <el-row style="margin-top: 50px;">
                <el-col :span="20">
                </el-col>
                <el-col :span="4">
                    <el-tag type="danger">已采集标签{{tagList.length}}个</el-tag>
                    <el-button style="margin-left: 10px;" type="primary" @click="inptGlass" :loading="loadingState.$state.loading">入库</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts" name="glassManagement-warehousing">
import { ref, reactive } from 'vue';
import { Loading } from '@element-plus/icons-vue';
import {query_list, query_rfid_list, start_rfid, stop_rfid, get_rfid_glasses, input_glasses_data} from '@/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { fatchDataState } from '../../store/fetchData';

const loadingState = fatchDataState()
const cardValue = ref('')
const cardValueoptions = ref([])

const glassType = ref('')
const glassTypeoptions = ref([])
const tagList = ref([])
const btnStatus = ref(0)
const getCardList = () => {
    if(!cardValue.value) {
        ElMessage.info('请选择读卡器')
        stopReadCard()
        return
    }
    get_rfid_glasses({rf_code: cardValue.value}).then(res => {
        tagList.value = res.data
    })
}
let timer = null
const cricleGetData = () => {
    if(timer){ 
        clearInterval(timer)
        timer = null
    }
    getCardList()
    timer = setInterval(() => {
        getCardList()
    }, 3 * 1000)
}
const removeCard = () => {
    if(!cardValue.value) {
        ElMessage.warning('请选择读卡器')
        return
    }
    stop_rfid({rf_code: cardValue.value}).then(res => {
    })
}


const clearTags = () => {
    if(timer) {
        ElMessage.warning('请先停止读卡');
        return
    } else {
        tagList.value = []
    }
}

// 开始读卡
const startReadCard = () => {
    if(!cardValue.value) {
        ElMessage.warning('请选择读卡器')
        return
    }
    btnStatus.value = 1
    if(timer){ 
        ElMessage.warning('读卡中>>>>')
        return
    }
    start_rfid({rf_code: cardValue.value}).then(() => {
        cricleGetData()
    })
}
// 停止读卡
const stopReadCard = () => {
    if(timer) {
        clearInterval(timer)
        timer = null
    }
    btnStatus.value = 0
    removeCard()
}
const inptGlass = () => {
    if(timer) {
        ElMessage.warning('请先停止读卡');
        return
    }
    if (!glassType.value) {
        ElMessage.warning('请选择眼睛分类')
        return
    }
    ElMessageBox.confirm('确定要入库吗？', '提示', {
        type: 'warning'
    })
    .then(async () => {
        loadingState.handleChangeState(true)
        input_glasses_data({
            glasses_type: glassType.value,
            glasses_list: tagList.value
        }).then(res => {
            if (res.code == '1000') {
                ElMessage.success('入库成功')
            }
        })
    })
    .catch(() => { });
    
}
query_list({"filter":"glasses_type"}).then(res => {
    glassTypeoptions.value = res.data
})
query_rfid_list().then(res => {
    cardValueoptions.value = res.data
})
</script>

<style scoped>
.tagContainer {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}
</style>